@import './theme/default.less';
@color-red: @theme-error-2;
@color-green: @theme-success-2;
@color-yellow: @theme-warn-1;
@color-blue: @theme-primary-2;
@color-darkgreen: @theme-success-5;
@color-text: @theme-stroke-10;

.zent-tag {
  display: inline-block;
  font-size: 12px;
  color: @color-text;
  line-height: 1;
  padding: 0.084em 0.417em;
  border: 1px solid @color-text;

  &.zent-tag-rounded {
    border-radius: 0.167em;
  }

  &.zent-tag-closable {
    .zent-tag-content {
      display: inline-block;
      margin-right: 0.417em;
    }

    .zent-tag-close-btn {
      cursor: pointer;
      transform: scale(0.6);
    }
  }

  &.zent-tag-style-red {
    background: @color-red;
    border-color: @color-red;
  }

  &.zent-tag-style-red-outline {
    color: @color-red;
    border-color: @color-red;
  }

  &.zent-tag-style-green {
    background: @color-green;
    border-color: @color-green;
  }

  &.zent-tag-style-green-outline {
    color: @color-green;
    border-color: @color-green;
  }

  &.zent-tag-style-yellow {
    background: @color-yellow;
    border-color: @color-yellow;
  }

  &.zent-tag-style-yellow-outline {
    color: @color-yellow;
    border-color: @color-yellow;
  }

  &.zent-tag-style-blue {
    background: @color-blue;
    border-color: @color-blue;
  }

  &.zent-tag-style-blue-outline {
    color: @color-blue;
    border-color: @color-blue;
  }

  &.zent-tag-style-darkgreen {
    background: @color-darkgreen;
    border-color: @color-darkgreen;
  }

  &.zent-tag-style-darkgreen-outline {
    color: @color-darkgreen;
    border-color: @color-darkgreen;
  }

  a {
    color: inherit;
  }
}
